<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useBlogStore } from '@/store/blog'
import { useAuthStore } from '@/store/auth'

const router = useRouter()
const blogStore = useBlogStore()
const authStore = useAuthStore()

const user = ref(authStore.user)
const userBlogs = ref([])
const loading = ref(true)
const stats = ref({
  totalBlogs: 0,
  totalViews: 0,
  totalLikes: 0,
  totalComments: 0
})

onMounted(async () => {
  if (!authStore.isAuthenticated) {
    router.push('/login')
    return
  }
  
  try {
    loading.value = true
    // 获取用户的博客
    const response = await blogStore.fetchUserBlogs(user.value.id)
    userBlogs.value = response.content.slice(0, 5) // 只显示最新的5篇博客
    
    // 计算统计数据
    if (response.content && response.content.length > 0) {
      stats.value.totalBlogs = response.content.length
      stats.value.totalViews = response.content.reduce((sum, blog) => sum + (blog.views || 0), 0)
      stats.value.totalLikes = response.content.reduce((sum, blog) => sum + (blog.likeCount || blog.likes || 0), 0)
      stats.value.totalComments = response.content.reduce((sum, blog) => sum + (blog.commentCount || blog.comments || 0), 0)
    }
  } catch (error) {
    console.error('Failed to load user dashboard data:', error)
  } finally {
    loading.value = false
  }
})

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString()
}

const navigateToBlog = (blogId) => {
  router.push(`/blogs/${blogId}`)
}

const navigateToCreateBlog = () => {
  router.push('/user/create-blog')
}

const navigateToAllBlogs = () => {
  router.push('/user/my-blogs')
}
</script>

<template>
  <div class="dashboard">
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
    </div>
    
    <template v-else>
      <!-- 欢迎消息 -->
      <div class="welcome-section">
        <h2>欢迎回来，{{ user?.nickname || user?.username }}</h2>
        <p class="welcome-text">这是您的个人仪表盘，您可以在这里查看博客统计数据和最近活动。</p>
      </div>
      
      <!-- 统计卡片 -->
      <div class="stats-section">
        <div class="stat-card">
          <div class="stat-icon blogs-icon">📝</div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalBlogs }}</div>
            <div class="stat-label">博客总数</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon views-icon">👁️</div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalViews }}</div>
            <div class="stat-label">总浏览量</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon likes-icon">❤️</div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalLikes }}</div>
            <div class="stat-label">获得点赞</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon comments-icon">💬</div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalComments }}</div>
            <div class="stat-label">评论数量</div>
          </div>
        </div>
      </div>
      
      <!-- 最近博客 -->
      <div class="recent-blogs-section">
        <div class="section-header">
          <h3 class="section-title">最近博客</h3>
          <button class="btn btn-primary" @click="navigateToCreateBlog">
            发布新博客
          </button>
        </div>
        
        <div v-if="userBlogs.length === 0" class="empty-blogs">
          <p>您还没有发布任何博客。点击上方按钮开始创作您的第一篇博客吧！</p>
        </div>
        
        <div v-else class="blogs-list">
          <div 
            v-for="blog in userBlogs" 
            :key="blog.id" 
            class="blog-item"
            @click="navigateToBlog(blog.id)"
          >
            <div class="blog-info">
              <h4 class="blog-title">{{ blog.title }}</h4>
              <p class="blog-date">{{ formatDate(blog.createTime) }}</p>
              <p v-if="blog.content" class="blog-preview">{{ blog.content.replace(/<[^>]+>/g, '').substring(0, 100) }}...</p>
            </div>
            <div class="blog-stats">
              <span class="blog-stat">👁️ {{ blog.views || 0 }}</span>
              <span class="blog-stat">❤️ {{ blog.likeCount || blog.likes || 0 }}</span>
              <span class="blog-stat">💬 {{ blog.commentCount || blog.comments || 0 }}</span>
            </div>
          </div>
          
          <div v-if="stats.totalBlogs > 5" class="view-all">
            <button class="btn btn-secondary" @click="navigateToAllBlogs">
              查看全部博客
            </button>
          </div>
        </div>
      </div>
      
      <!-- 快速操作 -->
      <div class="quick-actions-section">
        <h3 class="section-title">快速操作</h3>
        <div class="actions-grid">
          <router-link to="/user/create-blog" class="action-card">
            <div class="action-icon">✏️</div>
            <div class="action-title">发布博客</div>
            <div class="action-desc">创建并发布新的博客内容</div>
          </router-link>
          
          <router-link to="/user/my-blogs" class="action-card">
            <div class="action-icon">📋</div>
            <div class="action-title">管理博客</div>
            <div class="action-desc">查看和管理您的博客文章</div>
          </router-link>
          
          <router-link to="/user/profile" class="action-card">
            <div class="action-icon">👤</div>
            <div class="action-title">个人资料</div>
            <div class="action-desc">更新您的个人信息和头像</div>
          </router-link>
          
          <router-link to="/blogs" class="action-card">
            <div class="action-icon">🔍</div>
            <div class="action-title">浏览博客</div>
            <div class="action-desc">阅读和发现其他用户的博客</div>
          </router-link>
        </div>
      </div>
    </template>
  </div>
</template>

<style>
.dashboard {
  padding: 0.5rem 0;
}

.welcome-section {
  margin-bottom: 2rem;
}

.welcome-section h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.welcome-text {
  color: var(--text-light);
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.stat-card {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
}

.stat-icon {
  font-size: 2rem;
  margin-right: 1rem;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.stat-label {
  color: var(--text-light);
  font-size: 0.9rem;
}

.blogs-icon, .views-icon, .likes-icon, .comments-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.blogs-icon {
  background-color: rgba(74, 111, 165, 0.1);
  color: var(--primary-color);
}

.views-icon {
  background-color: rgba(92, 184, 92, 0.1);
  color: var(--success-color);
}

.likes-icon {
  background-color: rgba(217, 100, 43, 0.1);
  color: var(--accent-color);
}

.comments-icon {
  background-color: rgba(217, 83, 79, 0.1);
  color: var(--error-color);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.recent-blogs-section {
  margin-bottom: 2.5rem;
}

.empty-blogs {
  background-color: rgba(0, 0, 0, 0.02);
  padding: 2rem;
  text-align: center;
  border-radius: 8px;
  color: var(--text-light);
}

.blogs-list {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
}

.blog-item {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.blog-item:last-child {
  border-bottom: none;
}

.blog-title {
  font-size: 1.1rem;
  margin: 0 0 0.25rem;
  font-weight: 500;
}

.blog-date {
  color: var(--text-light);
  font-size: 0.85rem;
  margin: 0;
}

.blog-stats {
  display: flex;
  gap: 1rem;
}

.blog-stat {
  color: var(--text-light);
  font-size: 0.9rem;
}

.view-all {
  padding: 1.25rem;
  text-align: center;
  border-top: 1px solid var(--border-color);
}

.quick-actions-section {
  margin-bottom: 1rem;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.action-card {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: var(--text-color);
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.action-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.action-desc {
  color: var(--text-light);
  font-size: 0.9rem;
}

.loading-container {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(74, 111, 165, 0.2);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .blog-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .blog-stats {
    margin-top: 0.5rem;
  }
}

.blog-preview {
  color: var(--text-light);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style> 